<!DOCTYPE html>
<html>
<head>
<title>丸子妈妈</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="res/jquery.js"></script>
<script src="fun.js"></script>
<link href="style.css" rel="stylesheet" />
<link href="animate.css" rel="stylesheet" />
</head>
<body>

<script>
$(function(){
	var layout = [
		".pop_wechat",
		".pop_wechat_click",
		".talk_0",
		".talk_link_box",
		".long",
		".long_btn",
		".app",
		".app_img li:eq(0)",
		".app_img li:eq(1)",
		".app_img li:eq(2)",
		".app_img li:eq(3)",
		".app_box",
	];
	var timeDelay = [ .4,.3,.4,.8,.3,.8,.3,.1,2,2,2,2 ];
	var timeDurat = [ .3,.3,.3,.3,.3,.3,.3,.3,.3,.3,.3,.3 ];
	addAnimate(timeDelay,timeDurat,layout);
	setTimeout(function(){window.parent.nextAnimation('page22.html');},page_total*1000);	
})
</script>

<style>	
	.pop_wechat{animation-name: pop_show;}
	.pop_wechat_click{animation-name: pop_click;}
	.talk_0{left:100%; animation-name: window_show;}
	.hide_box{animation-name: show;}
	.talk_link_box{animation-name: gather_click;}
	.long{left:100%; animation-name: window_show;}
	.long_btn{animation-name: long_btn_click;}
	.app{left: 100%; animation-name: window_show;}
	.app_img li:first{animation-name: fadein;}
	.app_img li{animation-name: fadein;}
	.app_box{animation-name: window_hidden;}
	@keyframes long_btn_click{
		50% { background-color: rgba(0,0,0,.2);}
	}

</style>

<div class="out">
	<div class="phone_top"><dl class="time_point_16">20:30</dl></div>
	<div class="talk keyboard_show">
		<div class="talk_list">
			<div class="talk_time"><em>昨天 12:00</em></div>
			<dl class="talk_children_0"></dl>
			<div class="talk_time"><em class="time_point_15"></em></div>
			<dl class="talk_children_1"></dl>
			<dl class="talk_children_2"></dl>
		</div>
		<div class="talk_top"><dl>女儿</dl></div>
		<div class="talk_bottom_box">
			<div class="talk_bottom">
				<div class="talk_bottom_input"></div>
			</div>
		</div>
	</div>
	<div class="top_pop">
		<div class="pop_wechat_click">
			<div class="pop_wechat">
				<dl>
					<s>现在</s>
					<h4><i></i><em>微信</em></h4>
					<h2>丸子妈妈营</h2>
					<h3 class="course_state_2"></h3>
				</dl>
			</div>
		</div>
	</div>
	<div class="talk talk_0">
		<div class="talk_list">
			<div class="talk_list_in">
				<div class="talk_public">
					<h2>作业完成通知</h2>
					<h4>9月01日</h4>
					<ul>
						<li>薇薇完成了绘画作品</li>
						<li><em>学生姓名：</em>薇薇</li>
						<li><em>作业名称：</em>教师节快乐</li>
						<li><em>完成时间：</em>2018-09-02 18:20：00</li>
						<li>快快点击本消息，即可查看孩子的作品！别忘了分享出来让朋友们点赞哦~！</li>
					</ul>
					<h6>详情</h6>
				</div>
				<div class="talk_public talk_link_box">
					<h2>作业批改完成提醒</h2>
					<h4>9月05日</h4>
					<ul>
						<li>宇航老师点评了薇薇的作品</li>
						<li><em>作业名称：</em>教师节快乐</li>
						<li><em>所属课程：</em>L1 scratch启蒙</li>
						<li><em>辅导老师：</em>王宇航</li>
						<li>丸宝薇薇，小朋友，你的作品非常好哦~以教师节为背景，编写了一个小动画，小朋友平时肯定是个特别孝顺的小孩子，老师以你为骄傲！！而且你的作品额非常完美。老师像你这么大的时候绝对没有小朋友这么厉害~继续加油！！最后老师希望你把这个游戏分享给你最爱的妈妈，让她感受你对她满满的爱喔~</li>
						<li>点击文本消息，即可查看孩子的作品！别忘了分享出来让朋友们点赞哦~！</li>
					</ul>
					<h6>详情</h6>
				</div>
			</div>
		</div>
		<div class="talk_top"><dl>丸子妈妈营</dl></div>
		<div class="talk_bottom">
			<div class="talk_bottom_input"></div>
		</div>
	</div>
	<div class="out_box">
		<div class="long">
			<div class="long_btn"></div>
			<dl><dt><img src="img/long.jpg" /></dt></dl>
			<div class="long_top"><em>薇薇的作品</em><s></s></div>
		</div>
	</div>
	<div class="out_box app_box">
		<div class="app">
			<div class="app_top"><h2>丸子妈妈营</h2></div>
			<div class="app_operate"><img src="img/app/operate.jpg" /></div>
			<div class="app_bottom">
				<h2>无需键盘</h2>
				<h3>请在作品中操作或直接观看</h3>
			</div>
			<ul class="app_img">
				<li><img src="img/app/1.jpg" /></li>
				<li><img src="img/app/2.jpg" /></li>
				<li><img src="img/app/3.jpg" /></li>
				<li><img src="img/app/4.jpg" /></li>
			</ul>
		</div>
	</div>
</div>

</body>
</html>